<template>
<div>
	<head>
	</head>
	<v-content>
	<body >
		<div id="bigBox">
			<h1>Simple Chat</h1>
			  <!--表单登录区域-->
				<el-form ref="loginFormRef"  :model="loginForm"  :rules="loginFormRules" label-width="0px " class="inputBox">
					<!---用户名-->
					<el-form-item  class="inputText" prop="username">
						<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
					</el-form-item>
					<!---密码-->
					<el-form-item  class="inputText" prop="password">
						<el-input v-model="loginForm.password" prefix-icon="el-icon-key"  type="password"></el-input>
					</el-form-item>
					<!--按钮-->
					<el-form-item class="btns">
						<el-button type="primary" @click="login">登录</el-button>
						<el-button type="info" @click="register"  >注册</el-button>
					</el-form-item>
				</el-form>
		</div>
	</body>
	</v-content>
	</div>
</template>
<script>
import {login,register} from '../util/api.js'


export default {
    data( ) {
        return {
            //这是登录表单数据绑定对象
            loginForm:{
                username:'TEST4',
                password:'123123'
            },
            loginFormRules:{
                //验证用户名是否合法
                username:[
                     { required: true, message: '请输入登录名称', trigger: 'blur' },
                     { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                //验证密码
                password:[
                     { required: true, message: '请输入登录密码', trigger: 'blur' },
                     { min: 3, max: 15, message: '长度在3-15之间', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
       
        login(){
			this.$refs.loginFormRef.validate( async valid=>{
                if(!valid) return
                const result =await this.$http.post(login,this.loginForm)
                console.log(result)
				if(result.status!=200) this.$message.error("登录失败");
				if(result.data.token==null) this.$message.error("登录失败");
				else{
				this.$message.success("登录成功");
				}
                //token 保存到页面存储 
				window.sessionStorage.setItem('token',result.data.token)
				window.sessionStorage.setItem('id',result.data.adminInfo.id)
				console.log(result.data.adminInfo.authorityList)
				var authorityList=JSON.stringify(result.data.adminInfo.authorityList)
				window.sessionStorage.setItem('authorityList',authorityList)
				var authority=JSON.stringify(result.data.adminInfo.authority)
				window.sessionStorage.setItem('authority',authority)
				this.$router.push("/analysis")
				
            //     this.$router.push({path:"/helloworld",query:{
			// 		authorityList:result.data
			//    }
			})
        },
		register()
		{
			this.$refs.loginFormRef.validate( async valid=>{
				 if(!valid) return
                const result =await this.$http.post(register,this.loginForm)
                console.log(result)
                if(result.status!=200) this.$message.console.error("注册失败");
                this.$message.success("注册成功");

			}

			)
		}

    }
};
</script>
<style lang="less" scoped>
body
{
	//保证图片的相对位置
	padding:0px;
	margin:0px;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
    width:100%;
    border:hidden;
    overflow:hidden;
	background-size:100%;
	background-image: url("../assets/bgimg.jpg");	/* 背景图片 */
	background-repeat: no-repeat;	/* 背景图片不重复 */
}


#bigBox
{
	margin: 0 auto;	/* login框剧中 */
	margin-top: 200px; /* login框与顶部的距离 */
	padding: 20px 50px;	/* login框内部的距离(内部与输入框和按钮的距离) */
	background-color: #00000090;	/* login框背景颜色和透明度 */
	width: 400px;
	height: 320px;
	border-radius: 10px;	/* 圆角边 */
	text-align: center;	/* 框内所有内容剧中 */
}

#bigBox h1
{
	color: white;	/* LOGIN字体颜色 */
}
#bigBox h3{
	color: #fff;
	margin-top: 10px
}

#bigBox .inputBox
{
	margin-top: 60px;	/* 输入框顶部与LOGIN标题的间距 */
}

#bigBox .inputBox .inputText
{
	margin-top: 20px;	/* 输入框之间的距离 */
}

#bigBox .inputBox .inputText span
{
	color: white;	/* icon颜色 */
}

#bigBox .inputBox .inputText input
{
	border: 0;	/* 删除输入框边框 */
	padding: 10px 10px;	/* 输入框内的间距 */
	border-bottom: 1px solid white;	/* 输入框白色下划线 */
	background-color: #00000000;	/* 输入框透明 */
	color: white;	/* 输入字体的颜色 */
}

#bigBox .loginButton
{
	margin-top: 30px;	/* 按钮顶部与输入框的距离 */
	width: 150px;
	height: 25px;
	color: white;	/* 按钮字体颜色 */
	border: 0; /* 删除按钮边框 */
	border-radius: 20px;	/* 按钮圆角边 */
	// background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, 
	// #ee609c 100%);	/* 按钮颜色 */
	background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}
</style>
